import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form, Divider, Card, Steps, Button, Modal } from 'antd';
import Img from 'react-image';
import moment from 'moment';
import Check from './Check';
import DescriptionList from '../../components/DescriptionList';
import globalConstant from '../../utils/globalConstant';

const { Description } = DescriptionList;
const Step = Steps.Step;


@connect(({ immanage, loading }) => ({
  immanage,
  loading: loading.models.immanage,
}))
@Form.create()
export default class ShowUserInfo extends PureComponent {
  state={
    showCheckVisible: false,
  }
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'immanage/getWorkOrderDetail',
      payload: {
        id: this.props.data,
      },
    });
  }
  handleCheckModalCancel() {
    this.setState({
      showCheckVisible: false,
    });
  }
  handleShowCheckModal() {
    this.setState({
      showCheckVisible: true,
    });
  }
  handleOrderComplete = (id) => {
    Modal.confirm({
      title: '确定完结?',
      content: '确定完结该订单',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        this.props.dispatch({
          type: 'immanage/orderComplete',
          payload: {
            id,
          },
          callback: () => {
            this.props.dispatch({
              type: 'immanage/fetch',
              payload: {
                pageNum: this.state.pageNum,
                pageSize: this.state.pageSize,
              },
            });
          },
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  handleChildModal() {
    this.setState({
      showCheckVisible: false,
    });
    const { dispatch } = this.props;
    dispatch({
      type: 'immanage/getWorkOrderDetail',
      payload: {
        id: this.props.data,
      },
    });
    dispatch({
      type: 'immanage/fetch',
      payload: {
        pageNum: this.state.pageNum,
        pageSize: this.state.pageSize,
      },
    });
  }
  render() {
    const { workOrderInfo } = this.props.immanage;
    const { showCheckVisible } = this.state;
    return (
      <Card bordered={false} loading={this.props.loading}>
        <DescriptionList size="large" title="用户信息" style={{ marginBottom: 32 }} col={2}>
          <Description term="报装套餐">{workOrderInfo.packageName}</Description>
          <Description term="用户ID">{workOrderInfo.userId}</Description>
          <Description term="报装地址">{workOrderInfo.addrComplete}</Description>
          <Description term="姓名">{workOrderInfo.userName}</Description>
          <Description term="联系人">{workOrderInfo.userContactName}</Description>
          <Description term="邮箱">{workOrderInfo.email}</Description>
          <Description term="下单时间">{moment(workOrderInfo.createTime).format(globalConstant.dateFormat)}</Description>
          <Description term="是否付款">{workOrderInfo.payStatusDesc}</Description>
          <Description term="身份证正面">
            <Img style={{ width: 170, height: 90 }} src={workOrderInfo.userIdcardPhotoFront} />
          </Description>
          <Description term="身份证反面">
            <Img style={{ width: 170, height: 90 }} src={workOrderInfo.userIdcardPhotoSide} />
          </Description>
          <Description term="宽带信息">{workOrderInfo.netAccountInfo}</Description>
          <Description term="指派师傅">{workOrderInfo.workerName}</Description>
        </DescriptionList>
        <Divider style={{ marginBottom: 32 }} />
        <DescriptionList size="large" title="订单情况" style={{ marginBottom: 32 }} col={2}>
          <Description term="审核人">{workOrderInfo.checkUserName}</Description>
          <Description term="接单人">{workOrderInfo.workerName}</Description>
          <Divider style={{ marginBottom: 32 }} />
          <Steps current={workOrderInfo.step} >
            {
              workOrderInfo.stepList && workOrderInfo.stepList.map((item, index) => (
                <Step key={index.toString()} title={item.name} description={item.value} />
              ))
            }
          </Steps>
          <Divider style={{ marginBottom: 32 }} />
          <Description><Button type="primary" disabled={workOrderInfo.checkStatus === 'CHECK_STATUS_PASS'} onClick={() => { this.handleShowCheckModal(); }}>{workOrderInfo.checkStatus === 'CHECK_STATUS_PASS' ? '审核通过' : '未审核'}</Button></Description>
          <Description>
            {
              workOrderInfo.checkStatus === 'CHECK_STATUS_PASS' ? (
                <Button type="primary" onClick={() => { this.handleOrderComplete(workOrderInfo.id); }}>完结</Button>
              ) : (null)
            }
          </Description>
        </DescriptionList>
        <Modal
          visible={showCheckVisible}
          title="信息审核"
          footer={null}
          width="40%"
          onCancel={() => this.handleCheckModalCancel()}
          destroyOnClose
        >
          <Check handleModal={this.handleChildModal.bind(this)} />
        </Modal>
      </Card>
    );
  }
}
